<template>
  <div v-if="info" class="warp">
    <div class="custom-card">
      <Card :bordered="false">
        <template #title>
          <span class="title">订单信息</span>
        </template>
        <div class="disFlx">
          <Descriptions :column="1">
            <template #title>
              <span class="descriptions-title">订单信息</span>
            </template>
            <DescriptionsItem label="订单状态">
              <span :style="{ color: orderStateText.color }">
                {{ orderStateText.name }}
              </span>
            </DescriptionsItem>
            <DescriptionsItem label="订单编号">{{ info.orderCode }}</DescriptionsItem>
            <DescriptionsItem label="业务类型">活动报名订单</DescriptionsItem>
            <DescriptionsItem label="订单来源">{{ info.sourceOrgName }}</DescriptionsItem>
            <DescriptionsItem label="项目归属">{{ info.orgName }}</DescriptionsItem>
          </Descriptions>
          <Descriptions :column="1">
            <template #title>
              <span class="descriptions-title">支付信息</span>
            </template>
            <DescriptionsItem label="支付金额">
              {{ formatMoney({ isShowFree: false, money: info.payMoney || 0 }) }}
            </DescriptionsItem>
            <DescriptionsItem label="支付方式">
              {{ payModeText }}
            </DescriptionsItem>
            <DescriptionsItem label="提交时间">{{ info.createTime }}</DescriptionsItem>
            <DescriptionsItem label="支付时间">{{ info.payTime }}</DescriptionsItem>
            <DescriptionsItem label="支付流水号">{{ info.payCode }}</DescriptionsItem>
          </Descriptions>
        </div>
      </Card>
    </div>

    <div class="custom-card">
      <Card :bordered="false">
        <template #title>
          <span class="title">业务信息</span>
        </template>
        <Table :columns="businessColumns" :data-source="[
          {
            productName: info.productName,
            ticketName: info.ticketName,
            price: info.price,
            productCount: info.productCount,
            totalMoney: info.totalMoney,
            totalDiscountMoney: info.totalDiscountMoney
          }
        ]" :pagination="false">
          <template #bodyCell="{ column, text }">
            <template v-if="column.dataIndex === 'productName'">
              <div style="display: flex;gap:10px">
                <Image v-if="info.productPicture" :src="info.productPicture" :fallback="default_userIcon" width='64px'
                  height='64px' :preview="true" />
                <img v-else :src="default_userIcon" />
                <div class="ov-2">{{ text }}</div>
              </div>
            </template>
          </template>

          <template #footer>
            <div class="disFlx flexEnd" style="width: 100%;">
              <Descriptions :column="1" style="width: 220px">
                <DescriptionsItem>
                  <template #label>
                    <div class="label">费用总价</div>
                  </template>
                  <div class="descriptions-warp">
                    {{ formatMoney({ isShowFree: false, money: info.totalMoney || 0 }) }}
                  </div>
                </DescriptionsItem>
                <DescriptionsItem>
                  <template #label>
                    <div class="label">优惠</div>
                  </template>
                  <div class="descriptions-warp">
                    {{ formatMoney({ isShowFree: false, money: info.totalDiscountMoney || 0 }) }}
                  </div>
                </DescriptionsItem>
                <DescriptionsItem>
                  <template #label>
                    <div class="label">实付款</div>
                  </template>
                  <div class="descriptions-warp" style="color:red">
                    {{ formatMoney({ isShowFree: false, money: info.payMoney || 0 }) }}
                  </div>
                </DescriptionsItem>
              </Descriptions>
            </div>
          </template>
        </Table>
      </Card>
    </div>

    <div class="custom-card">
      <Card :bordered="false">
        <template #title>
          <span class="title">子订单信息</span>
        </template>
        <Table :columns="subOrderColumns" :data-source="info.subInfoList" :pagination="false">

          <template #bodyCell="{ column, text, record }">
            <template v-if="column.dataIndex === 'personName'">
              <div class="disFlxAC">
                <Image v-if="record.avatar" :src="record.avatar" :fallback="default_userIcon" width='64px' height='64px'
                  :preview="true" />
                <img v-else :src="default_userIcon" />
                <div class="ov-2">{{ text }}</div>
              </div>
            </template>
            <template v-if="column.dataIndex === 'refundStatus'">
              <div class="disFlxAC"
                :style="{ color: getActivitySubOrderStatus(orderStateText.value, info.payState, text).color }">
                {{ getActivitySubOrderStatus(orderStateText.value, info.payState, text).name }}
              </div>
            </template>
            <template v-if="column.dataIndex === 'consumeStatus'">
              <div class="disFlxAC">
                {{ consumeStatusText(text) }}
              </div>
            </template>
          </template>

        </Table>
      </Card>
    </div>

    <div class="custom-card">
      <Card :bordered="false">
        <template #title>
          <span class="title">分润信息</span>
        </template>
        <Table :columns="settleInfoColumns" :data-source="info.settleInfoList" :pagination="false">
          <template #bodyCell="{ column, index }">
            <template v-if="column.dataIndex === 'serial'">
              {{ index + 1 }}
            </template>

          </template>

        </Table>
      </Card>
    </div>

  </div>
</template>

<script lang="ts" setup>
import { Card, Descriptions, DescriptionsItem, Table, Image } from 'ant-design-vue';
import { ref } from 'vue';
import { formatMoney } from '@/utils/number'
import Dictionary from '@/utils/dictionary';
import { computed } from 'vue';
import { useRoute } from 'vue-router';
import { getActivityTicketOrderDetail } from '@/api/membership';
import { onMounted } from 'vue';
import { getActivityOrderStatus, getActivitySubOrderStatus } from '@/utils/orderStatusText';
import default_userIcon from "@/assets/images/default_userIcon.png";
const dicts = Dictionary.getLocalMulti(['orderState', 'payMode', 'consumeStatus']);
const route = useRoute();
const businessColumns = [
  {
    dataIndex: 'productName',
    title: '活动名称',
    width: 300
  },
  {
    title: '报名类型',
    key: 'ticketName',
    dataIndex: 'ticketName',
    width: 300
  },
  {
    title: '单价（元）',
    dataIndex: 'price',
    key: 'price',
    width: 140
  },
  {
    title: '数量',
    key: 'productCount',
    dataIndex: 'productCount',
    width: 140
  },
  {
    title: '总计（元）',
    dataIndex: 'totalMoney',
    key: 'totalMoney',
    width: 140
  },
  {
    title: '优惠减免（元）',
    key: 'totalDiscountMoney',
    dataIndex: 'totalDiscountMoney',
    width: 140
  }
]

const subOrderColumns = [
  {
    title: '子订单关联归属',
    key: 'personName',
    dataIndex: 'personName',
    width: 230
  },
  {
    title: '金额（元）',
    key: 'payMoney',
    dataIndex: 'payMoney'
  },
  {
    title: '优惠减免（元）',
    key: 'discountMoney',
    dataIndex: 'discountMoney'
  },
  {
    title: '订单状态',
    key: 'refundStatus',
    dataIndex: 'refundStatus',
  },
  {
    title: '核销状态',
    key: 'consumeStatus',
    dataIndex: 'consumeStatus',
  }
]

const settleInfoColumns = [
  {
    title: '序号',
    dataIndex: 'serial',
    width: '80px'
  },
  {
    title: '商户',
    key: 'merchantName',
    dataIndex: 'merchantName'
  },
  {
    title: '商户号',
    key: 'saasMerchantNo',
    dataIndex: 'saasMerchantNo'
  },
  {
    title: '预估收益（元）',
    key: 'distributionAmount',
    dataIndex: 'distributionAmount'
  },
  {
    title: '结算金额（元）',
    key: 'settleAmount',
    dataIndex: 'settleAmount'
  },
  {
    title: '结算类型（元）',
    key: 'settleTypeName',
    dataIndex: 'settleTypeName'
  },
  {
    title: '结算时间（元）',
    key: 'settleDate',
    dataIndex: 'settleDate'
  }
]

const info = ref({
  orderCode: '',
  sourceOrgName: '',
  payTime: '',
  createTime: '',
  orgName: '',
  productName: '',
  ticketName: "",
  price: 0,
  productCount: 0,
  totalMoney: 0,
  totalDiscountMoney: 0,
  productPicture: '',
  payMoney: 0,
  orderState: undefined,
  payMode: undefined,
  payCode: undefined,
  payState: undefined,
  refundStatus: undefined,
  subInfoList: [],
  settleInfoList: []
})


const consumeStatusText = (text: string) => {
  const obj = dicts.consumeStatus.find(item => item.dictValue == text)
  return obj ? obj.dictLabel : '--'
}
const orderStateText = computed(() => {
  return getActivityOrderStatus(info.value.orderState, info.value.payState, info.value.refundStatus)
})

const payModeText = computed(() => {
  const obj = dicts.payMode.find(item => item.dictValue == info.value.payMode)
  return obj ? obj.dictLabel : '--'
})

const queryActivityTicketOrderDetail = async () => {
  const res = await getActivityTicketOrderDetail(route.query.id)
  info.value = res
}

onMounted(() => {
  queryActivityTicketOrderDetail()
})
</script>

<style lang="less" scoped>
.warp {
  padding: 20px;

  .disFlx {
    display: flex;
    border-radius: 8px;
    background: #f7f8fa;
    padding: 20px;
  }

  .disFlxAC {
    display: flex;
    align-items: center;
    gap: 5px;
  }

  .flexEnd {
    justify-content: flex-end;
  }

  .custom-card {

    .title {
      color: #1d2129;
      /* 20/CN-Medium */
      font-family: 'PingFang SC';
      font-size: 20px;
      font-style: normal;
      font-weight: 400;
      line-height: 28px;
      /* 140% */
    }

    .descriptions-title {
      color: #1d2129;
      /* 16/CN-Regular */
      font-family: 'PingFang SC';
      font-size: 16px;
      font-style: normal;
      font-weight: 400;
      line-height: 24px;
      /* 150% */
    }

    ::v-deep .ant-DescriptionsItem>span {
      color: #4e5969;
      /* 14/CN-Regular */
      font-family: 'PingFang SC';
      font-size: 14px;
      font-style: normal;
      font-weight: 400;
      line-height: 22px;
      /* 157.143% */
    }



    .ant-table-content {
      background-color: red;
    }

    .ant-table-footer {
      background: red;
    }
  }
}

.label {
  width: 60px;
  display: inline-block;
  text-align: right;
}

.descriptions-warp {
  width: 120px;
  margin-right: 20px;
  text-align: right;
}
</style>
